
<template>
  <main-container
    :headerText="'管理员设置 >> 类别 ' + (isEdit ? '编辑' : '添加')"
  >
    <div class="content" :key="showPageKey">
      <div class="edit-wrap">
        <div class="top-input">
          <el-form
            :model="role"
            :rules="rules"
            ref="role"
            label-width="120px"
            class
          >
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="role.roleName"
                placeholder="请输入角色名称"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="角色描述" prop="roleDescribe">
              <el-input
                type="textarea"
                v-model="role.roleDescribe"
                placeholder="请输入角色描述"
                :rows="5"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="角色权限">
              <div class="access-list" v-if="roleData">
                <el-tree
                  :props="defaultProps"
                  :data="roleData"
                  ref="tree"
                  highlight-current
                  show-checkbox
                  node-key="id"
                  :default-checked-keys="curCheckArr"
                  @getCheckedKeys="getCheckedNodes"
                ></el-tree>
              </div>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="handleSave('role')"
                >保存</el-button
              >
              <el-button type="info" @click="back">返回</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="submit-option">
        <el-button
          v-if="!isEdit"
          @click="handleAdd('role')"
          size="small"
          type="primary"
          >立即添加</el-button
        >
        <el-button v-else @click="handleEdit('role')" size="small" type="primary"
          >编辑</el-button
        >
        <el-button @click="handleCancel" size="small" type="primary"
          >取消</el-button
        >
      </div>
    </div>
  </main-container>
</template>


<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import date_edit from "@/components/subEditCon/dateEdit";
import upload_img from "@/components/subEditCon/uploadImgEdit";
import bg_editor from "@/components/bg-editor";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    // "input-edit": () => resolve(["@/components/subEditCon/inputEdit"]),
    // "select-edit": () => resolve(["@/components/subEditCon/selectEdit"]),
    "date-edit": date_edit,
    "upload-img": upload_img,
    "bg-editor": bg_editor,
  },
  props: {},
  data() {
    return {
      showPageKey: 119, //刷新的key
      formData: {
        roleName: "",
        menuId: "",
      },

      isEdit: false,
      allMethods: "",

      //菜单数据
      currentPage: 1,
      id: "",
      roleData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      curCheckArr: [], //当前选中
      role: {
        roleList: [],
        roleName: "",
        roleDescribe: "",
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        // roleList: [
        //   {
        //     type: "array",
        //     message: "请输入角色权限",
        //     required: true,
        //     trigger: "change",
        //   },
        // ],
      },
    };
  },
  mounted() {
    this.getRoleList();
    const id = this.$route.query.id;
    if (id) {
      this.isEdit = true;
      this.handleGetDetail();
    }

  },
  methods: {
    /* 获取详情数据 */
    handleGetDetail() {
      var url = API.admin_manager.role_detail;
      var params = {
        id: this.$route.query.id,
      };
      jhTools.post(url, params, params, (res) => {
        console.log("详情数据", res);
        var resData = res.data;
        this.role.roleName = resData.roleName;
        resData.sysMenuDTOS.forEach((item, index) => {});
        this.curCheckArr = resData.sysMenuDTOS;
      });
    },
    /* 获取菜单权限 */
    getRoleList() {
      const url = API.admin_manager.menu_all_page;
      var reqData = {
        pageIndex: 1,
        pagegSize: 1000,
      };
      jhTools.post(url, reqData, reqData, (res) => {
        console.log("菜单权限数据", res);
        if (res.code == 200) {
          var resDataList = res.data.records || res.data;
          var menuDataList = [];
          //找一级菜单
          resDataList.forEach((item, index) => {
            item.label = item.menuName;
            if (!item.parentId) {
              item.children = [];
              menuDataList.push(item);
            }
          });
          //添加二级菜单 目前只做二级菜单
          resDataList.forEach((item, index) => {
            if (item.parentId) {
              menuDataList.forEach((firstItem, idx) => {
                if (item.parentId == firstItem.id) {
                  firstItem.children.push(item);
                }
              });
            }
          });
          //格式化处理
          // resDataList.forEach((item) => {
          //   this.$set(item, "label", item.menuName);
          //   this.$set(item, "children", item.sysMenuList);
          //   if (item.children && item.children.length > 0) {
          //     item.children.forEach((item) => {
          //       this.$set(item, "label", item.menuName);
          //     });
          //   }
          // });
          this.roleData = menuDataList;
          console.log("数据数据", menuDataList);
        }
      });
    },
    /*  */
    getCheckedNodes(leafOnly) {
      console.log(leafOnly);
    },

    /* 返回 */
    handleCancel() {
      this.$router.push({
        path: "/admin_manager_role_table",
        query: { currentPage: this.currentPage },
      });
    },


    /* 保存 */
    handleAdd: function (formName) {
      this.role.roleList = this.$refs.tree.getCheckedKeys();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = API.admin_manager.role_add,
            param;
          if (this.role.roleList.length == 0) {
            this.$message({
              type: "warning",
              message: "权限不能为空!",
            });
            return false;
          }
          param = {
            menuId: this.role.roleList,
            roleName: this.role.roleName,
            remark: this.role.roleDescribe,
          };
          console.log("param", param);
          jhTools.post(url, param, null, (res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功！",
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/admin_manager_role_table",
                  query: { currentPage: this.currentPage },
                });
              }, 500);
            } else {
              this.$message({
                type: "warning",
                message: res.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },


    /* 编辑 */
    handleEdit: function (formName) {
       this.role.roleList = this.$refs.tree.getCheckedKeys();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = API.admin_manager.role_edit,
            param;
          if (this.role.roleList.length == 0) {
            this.$message({
              type: "warning",
              message: "权限不能为空!",
            });
            return false;
          }
          param = {
            menuId: this.role.roleList,
            roleName: this.role.roleName,
            remark: this.role.roleDescribe,
            id: this.$route.query.id,
          };
          console.log("param", param);
          jhTools.post(url, param, null, (res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "保存成功！",
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/admin_manager_role_table",
                  query: { currentPage: this.currentPage },
                });
              }, 500);
            } else {
              this.$message({
                type: "warning",
                message: res.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });

    },
    //method end
  },

};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.content {
  min-height: 100%;
}

.top-option {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  margin: 0 30px;
  padding: 10px 0;

  .left-box {
    padding-left: 30px;
    max-width: 900px;

    .sub {
      float: left;
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .right-box {
    padding-right: 30px;
    // min-width: 300px;

    .sub {
      float: right;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}

/* 操作栏相关*/

/* 输入*/
.edit-wrap {
  padding: 40px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;

  label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .tips {
    color: #f10215;
  }
  // //标题
  // .title {
  //   height: 46px;
  //   font-size: 14px;
  //   padding-left: 20px;
  //   font-weight: bold;
  //   line-height: 46px;
  // }

  .top-input {
    .item {
      margin-top: 20px;

      &.img-item {
        display: flex;
        flex-direction: row;
        // margin-bottom: -36px;

        .inline-block {
          max-height: 160px;
        }
      }
    }
  }

  //标题描述类
  .title-text {
    font-size: 15px;
    line-height: 22px;
    padding-left: 30px;
  }
}

.submit-option {
  width: 300px;
  padding-top: 80px;
  padding-bottom: 60px;
  padding-left: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//调整item 样式
.inline-block {
  display: inline-block;
  margin-left: 22px;
  &.id {
    padding-left: 20px;
  }
  el-input {
    width: 20px !important;
  }

  //单项选择
  .radio-box {
    // width: 70px;
    display: inline-block;
    text-align: left;
  }
  .radio-box:nth-child(1) {
    // margin-left: -40px;
  }
}

/* 上传按钮样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 107px;
  height: 107px;
  line-height: 107px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.avatar {
  width: 107px;
  height: 107px;
  display: block;
}
</style>